<template>
    <card class="job-card">
        <template #content>
            <div class="job-name text-bold">{{jobDetail.title}}</div>
            <p class="salary">
                <span class="num text-bold text-red">
                    {{jobDetail.salary_min / 1000}}
                    ~
                    {{jobDetail.salary_max / 1000}}k
                </span>
                <badge v-if="jobDetail.salary_num" :text="`${jobDetail.salary_num} 薪`"/>
            </p>
            <p class="tag-container">
                <Tag>
                    {{jobDetail.work_year_display | formatWorkYear}}
                </Tag>
                <Tag>
                    {{jobDetail.background_display | formatBackground}}
                </Tag>
                <Tag>{{jobDetail.type_display}}</Tag>
                <Tag>{{jobDetail.department.name}}</Tag>
            </p>
            <p class="place-container">
                <i class="fa fa-map-marker" aria-hidden="true"></i>
                {{jobDetail.working_place}}
            </p>

            <div>
                <p class="pre-title text-bold">岗位职责</p>
                <div class="pre-text" v-html="jobDetail.responsibility"></div>
            </div>
            <div>
                <p class="pre-title text-bold">职位要求</p>
                <div class="pre-text" v-html="jobDetail.requirements"></div>
            </div>
        </template>

        <template #footer>
            <div class="send-out-btn-container text-center">
                <button
                    @click="onSendOutClick(jobDetail)"
                    style="border-radius: 99px; font-weight: bold"
                    aria-hidden="true"
                >
                    <i class="fa" :class="isChecked ? 'fa-check-square-o' : 'fa-plus-square-o'"></i>
                </button>
            </div>
        </template>
    </card>
</template>

<script>
    import eventBus from '@/event-bus.js';
    import {
        XButton,
        Card,
        Badge,
        Group
    } from 'vux';
    import Tag from '../widget/Tag';

    const TO_BE_SUBMIT_JOBS_STORAGE_KEY = 'to_be_submit_jobs_storage_key';

    export default {
        name: 'JobDetailCard',
        components: {
            XButton,
            Tag,
            Card,
            Badge,
            Group
        },
        props: {
            jobDetail: {
                require: true,
                type: Object
            }
        },

        mounted() {
            let toBeSubmitJobs = sessionStorage.getItem(TO_BE_SUBMIT_JOBS_STORAGE_KEY);
            if (!toBeSubmitJobs) {
                return;
            }
            toBeSubmitJobs = JSON.parse(toBeSubmitJobs);
            if (toBeSubmitJobs.length <= 0) {
                return;
            }
            this.isChecked = toBeSubmitJobs.some(item => item.id === this.jobDetail.id);
        },

        filters: {
            // 格式化工作经验
            formatWorkYear(workYear) {
                if (typeof workYear !== 'string') {
                    return workYear + '';
                }
                if (workYear === '不限') {
                    return `经验${workYear}`;
                }
                return workYear;
            },

            // 格式化教育背景
            formatBackground(background) {
                if (typeof background !== 'string') {
                    return background + '';
                }
                if (background === '不限') {
                    return `学历${background}`;
                }
                return background;
            }
        },

        data() {
            return {
                isChecked: false
            };
        },

        methods: {
            onSendOutClick(jobDetail) {
                let toBeSubmitJobs = sessionStorage.getItem(TO_BE_SUBMIT_JOBS_STORAGE_KEY);
                if (toBeSubmitJobs) {
                    toBeSubmitJobs = JSON.parse(toBeSubmitJobs);
                } else {
                    toBeSubmitJobs = [];
                }

                let isIncludeJob = this.isChecked || toBeSubmitJobs.some(item => item.id === jobDetail.id);
                if (isIncludeJob) {
                    // 待投递列表中已存在该职位
                    this.showMessage('待投递列表中已存在该职位', 'warn');
                    return;
                }

                let sendOutJobsCount = toBeSubmitJobs.length;
                if (sendOutJobsCount >= 2) {
                    // 已超出最大投递数量
                    this.showMessage('至多允许投递 2 个职位', 'warn');
                    return;
                }

                this.isChecked = true;
                toBeSubmitJobs.push(jobDetail);
                toBeSubmitJobs = JSON.stringify(toBeSubmitJobs);
                sessionStorage.setItem(TO_BE_SUBMIT_JOBS_STORAGE_KEY, toBeSubmitJobs);
                this.$emit('on-job-is-added');
                this.showMessage('已添加职位至待投递列表', 'success');
            },

            // toast 消息
            showMessage(message = 'message', type = 'text') {
                eventBus.$emit('on-show-message', {message, type});
            }
        }
    };
</script>

<style lang="less" scoped>
    .job-card {
        padding: 1rem;

        p {
            line-height: 2;
        }

        .job-name {
            font-size: 1.2rem;
        }

        .salary {
            display: flex;
            align-items: center;
            font-size: 1.1rem;
            /*padding-top: .25rem;*/

            .num {
                margin-right: .5rem;
            }
        }

        .tag-container {
            font-size: 0;
        }

        .place-container {
        }

        .pre-title {
        }

        .pre-text {
        }
    }

    .send-out-btn-container {
        button {
            color: #1aad19;
            font-size: 1.5rem;
            border: none;
            outline: none;
            background: none;

            &:active {
                color: rgba(26, 173, 25, .5);
            }
        }
    }
</style>
